<template>
  <a-card :bordered="false">
    <!--导航区域-->
    <div>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
        <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
      </a-tabs>
    </div>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8" v-if="tabKey === '1'">
            <a-form-item label="单位名称">
             <j-tree-select
              v-model="queryParam.deptId"
              placeholder="请选择部门"
              dict="sys_depart,depart_name,id"
              pidField="parent_id">
            </j-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" v-if="tabKey === '2'">
            <a-form-item label="操作模块">
               <a-select v-model="queryParam.bizCode" placeholder="请选择操作模块" allowClear>
                <a-select-option v-for="(item, index) in operationModulesData"  :key="index" :value="item.value" >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" v-if="tabKey === '2'">
            <a-form-item label="操作类型">
               <a-select v-model="queryParam.operationCode" placeholder="请选择操作类型" allowClear>
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="(item, index) in operationTypesData"  :key="index" :value="item.value" >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="10">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                style="width: 210px"
                v-model="queryParam.createTimeRange"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>
           <a-col :md="5" :sm="8">
            <a-form-item label="账号">
               <a-input placeholder="请输入账号搜索" v-model="queryParam.operatorAccount"></a-input>
            </a-form-item>
          </a-col>
         <a-col :md="7" :sm="8" v-if="tabKey === '2'">
            <a-form-item label="使用模型">
               <a-select v-model="queryParam.modelCode" placeholder="请选择使用模型" allowClear>
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="(item, index) in caseEventModelsData"  :key="index" :value="item.value" >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24" >
                <a-button type="primary"  style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary"  @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
            </a-col>
          </span>

        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :columns="tabKey==='1'?columns:columns1"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">

      <!-- <template v-if="queryParam.logType==='2'" #expandedRowRender="record">
        <div style="margin: 0">
          <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
          <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
        </div>
      </template> -->
      <template slot="action" slot-scope="text, record">
        <a-button @click="openDetail(record)" type="link" style="padding: 0;">详情</a-button>
      </template>
      <!-- 字符串超长截取省略号显示-->
      <span slot="logContent" slot-scope="text">
          <j-ellipsis :value="text" :length="40"/>
        </span>
      <span slot="operationType" slot-scope="text">
        {{text?'登录':'退出登录'}}
      </span>   
    </a-table>
    <!-- table区域-end -->

    <logDetailModel
      ref="logDetailModel"
    ></logDetailModel>
  </a-card>
</template>

<script>
  import { filterObj } from '@/utils/util';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
 import logDetailModel from './logDetailModel'
 import * as api from '@/api/wxSmuggle/LogAuditing.js'
  export default {
    name: "LogList",
    mixins:[JeecgListMixin],
    components: {
      JEllipsis,
      JTreeSelect,
      logDetailModel
    },
    data () {
      return {
        showDetail:false,
        titleDetail:'',
        description: '这是日志管理页面',
        caseEventModelsData:[],//使用模型
        operationModulesData:[],//操作模块
        operationTypesData:[],//操作类型
        // 查询条件
        queryParam: {
          // operatorAccount:'',
          // operationCode:'',
          // modelCode:'',
          createTimeRange:[],
        },
        tabKey: "1",
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '账号',
            dataIndex: 'operatorAccount',
            align:"center",
            // sorter: true
          },
          {
            title: '姓名',
            dataIndex: 'operatorName',
            align:"center",
            // sorter: true
          },
          {
            title: '单位名称',
            align:"left",
            dataIndex: 'departName',
            scopedSlots: { customRender: 'departName' },
            // sorter: true
          },
          {
            title: '操作行为',
            align:"left",
            dataIndex: 'operationType',
            scopedSlots: { customRender: 'operationType' },
            // sorter: true
          },
          // {
          //   title: '日志内容',
          //   align:"left",
          //   dataIndex: 'logContent',
          //   scopedSlots: { customRender: 'logContent' },
          //   sorter: true
          // },
          
          // {
          //   title: 'IP',
          //   dataIndex: 'ip',
          //   align:"center",
          //   sorter: true
          // },
          // {
          //   title: '耗时(毫秒)',
          //   dataIndex: 'costTime',
          //   align:"center",
          //   sorter: true
          // },
          // {
          //   title: '日志类型',
          //   dataIndex: 'logType_dictText',
          //   /*customRender:function (text) {
          //     if(text==1){
          //       return "登录日志";
          //     }else if(text==2){
          //       return "操作日志";
          //     }else{
          //       return text;
          //     }
          //   },*/
          //   align:"center",
          // },
          {
            title: '创建时间',
            dataIndex: 'operationTime',
            align:"center",
            // sorter: true
          }
        ],
        columns1: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '操作模块',
            dataIndex: 'moduleName',
            align:"center",
          },
          {
            title: '操作路径',
            dataIndex: 'modulePath',
            align:"center",
          },
          {
            title: '操作类型',
            dataIndex: 'operationTypeName',
            align:"center",
          },
          {
            title: '使用模型',
            dataIndex: 'caseEventModelName',
            align:"center",
          },
          {
            title: '审批单号',
            dataIndex: 'xchNumber',
            align:"center",
          },
          {
            title: '操作时间',
            dataIndex: 'operationTime',
            align:"center",
            // sorter: true
          },
          {
            title: '操作账号',
            dataIndex: 'operatorAccount',
            align:"center",
            // sorter: true
          },
          {
            title: '操作人',
            dataIndex: 'operatorName',
            align:"center",
            // sorter: true
          },
          {
            title: '返回结果',
            width: 100,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operateColumn:
        {
          title: '操作类型',
          dataIndex: 'operateType_dictText',
          align:"center",
        },
        labelCol: {
          xs: { span: 1 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 16 },
        },
        url: {
          list: api.publicApi.getLoginLogsListBy,
        },
      }
    },
    created(){
      this.getParamsList()
    },
    methods: {
      getQueryParams(){
        var param = Object.assign({}, this.queryParam,this.isorter);
        // param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        delete param.createTimeRange; // 时间参数不传递后台
        // if (this.superQueryParams) {
        //   param['superQueryParams'] = encodeURI(this.superQueryParams)
        //   param['superQueryMatchType'] = this.superQueryMatchType
        // }
      
        return param //filterObj(param);
      },

    searchQuery() {
      this.initPage()
      this.dataSource = []
      this.loadData(1);
      // 点击查询清空列表选中行
      this.selectedRowKeys = []
      this.selectionRows = []
    },
      // 重置
      searchReset(){
        var that = this;
        if(this.tabKey == "1"){
          this.queryParam= {
            createTimeRange:[],
          }
        }else{
           this.queryParam= {
            operatorAccount:'',
            operationCode:'',
            modelCode:'',
            createTimeRange:[],
          }
        }
        
        that.loadData(1);
      },
      // 日志类型
      callback(key){

        this.tabKey = key;
        // 动态添加操作类型列
        // if (key == 2) {
        //   this.tabKey = '2';
        //   this.columns.splice(7, 0, this.operateColumn);
        // }else if(this.columns.length == 9)
        // {
        //   this.tabKey = '1';
        //   this.columns.splice(7,1);
        // }
        this.dataSource = []
        if(key=="1"){
          this.initPage()
          this.queryParam= {
            createTimeRange:[],
          }
          this.url.list=api.publicApi.getLoginLogsListBy
        }else{
          this.initPage()
          this.queryParam= {
            operatorAccount:'',
            operationCode:'',
            modelCode:'',
            createTimeRange:[],
          }
          this.url.list=api.publicApi.getAuditLogsListBy
        }
        
        let that=this;
        that.loadData(1);
      },
      onDateChange: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.startTime=dateString[0];
        this.queryParam.endTime=dateString[1];
      },
      onDateOk(value) {
        console.log(value);
      },
      openDetail(record){
         this.$refs.logDetailModel.show(record)
      },
      getParamsList(){
        api
            .getParamsList()
            .then(res => {
              console.log("res===",res);
              if (res.success) {
                this.caseEventModelsData=res.result.caseEventModels
                this.operationModulesData=res.result.operationModules
                this.operationTypesData=res.result.operationTypes
              } else {
                this.$message.warning(res.message)
              }
            })
            .catch(e => {
              this.$message.warn('请求失败！')
            }).finally(() => {
            })
      },
      initPage(){
        this.ipagination.total = 0
        this.ipagination.current = 1
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>